{extend name="layout/layout"}
{block name="content"}
<style>
   .delete-btn {
      color:#ff5722;
      cursor: pointer;
   }
</style>
<main class="user_page  ">
    <section class="">
        <div class="layui-main">
            <div class="user_con">
                <div class="user_headpage" >
                    {include file="user_activity/page_menu" menu='par_tick' id="$id" /}
                </div>
                <div class="right_main ">

                  <p class="ft24 mb10 ft-bold">職涯發展</p>
                  <p class="ft14 gary_c9 mb20 ft-bold">你可以透過 mail 發送公關票</p>
                  <div class="block_com ">
                     <div class="ft-bold line2 mb30">
                        <p>活動名稱：{$act.name}</p>
                        <p>活動時間：{$act.begin_time} -- {$act.end_time}</p>
                        <p>活動形式：{$act.type_name}</p>
                        <p>活動地點: {$act.region_name}{$act.address_detail}</p>
                     </div>
                     <div class="layui-form mb30">
                        <table class="layui-table a9_table " lay-skin="line">
                           <colgroup>
                           </colgroup>
                           <thead>
                              <tr>
                                 <th>
                                    <div class="ml25">票券名稱</div>
                                 </th>
                                 <th>
                                    <p class="tac">狀態</p>
                                 </th>
                                 <th class="tac">
                                    <p class="tac">售價</p>
                                 </th>
                                 <th class="tac">
                                    <p class="tac">庫存與總數</p>
                                 </th>
                              </tr>
                           </thead>
                           <tbody class="ft-bold ">
                              {volist name="ticket_detail" id="ticket"} 
                                 <tr>
                                    <td class="d-flex al-c"><input type="radio" name="ticket[]" class="mr10" value="{$ticket.name}" data-type = 1 data-id="{$ticket.id}">{$ticket.name}
                                    </td>
                                    <td class="tac">{if $ticket.sale_status == 2} 
                                       已结束 
                                       {elseif $ticket.sale_status ==3 /}
                                       已售完
                                       {elseif $ticket.sale_status ==4 /}
                                       未开售
                                       {else /} 
                                       售卖中 
                                       {/if}</td>
                                    <td class="tac">{$ticket.price ==0 ? '免费' : $ticket.price}</td>
                                    <td class="tac">{$ticket.rest_quantity}/{$ticket.quantity}</td>
                                 </tr>
                              {/volist}

                              {volist name="ticket_group" id="group"} 
                                 <tr>
                                    <td class="d-flex al-c"><input type="radio" name="ticket[]"  value="{$group.group_name}" data-type = 2 class="mr10" data-id="{$group.id}">{$group.group_name}
                                    </td>
                                    <td class="tac">{if $group.sale_status == 2} 
                                       已结束 
                                       {elseif $group.sale_status ==3 /}
                                       已售完
                                       {elseif $group.sale_status ==4 /}
                                       未开售
                                       {else /} 
                                       售卖中 
                                       {/if}</td>
                                    <td class="tac">{$group.group_price ==0 ? '免费' : $group.group_price}</td>
                                    <td class="tac">{$group.group_remain_number}/{$group.group_number}</td>
                                 </tr>
                              {/volist}
                              
                           </tbody>
                        </table>

                     </div>
                     <p class="ft18 ft-bold mb20">你選擇的票券內容</p>
                     <div class="d-flex layui-row layui-col-space20 ">
                        <div class="layui-col-md7 layui-col-xs12">
                           <div class="uapt_b1">
                              <p></p>

                           </div>
                        </div>
                        <div class="layui-col-md5 layui-col-xs12">
                           <p class="gary_c6 ft12 line18">1. 每次操作寄送只能針對相同的票券組合，如果你需要寄送不
                              同的票券內容，請分多次操作。出票結果可以到 參加名單 中
                              確認。<br>
                              2. 此票券發送功能不受到前台售票頁面的規則限制，只管票券
                              或商品的庫存數量是否足夠，因此請特別留意您的操作與資料
                              正確性。<br>
                              3. 發送後邀請信函立即發送，您可以透過名單管理取消該票券
                              資格，但無法回收信件，請注意。 </p>
                        </div>
                     </div>
                     <div class="tac ft18 mb30 mt40">
                        <p class="mb16 ft-bold">贈票邀請名單（票券將寄送到受邀人電子信箱）</p>
                        <p class="orange_c ">第 1 位</p>
                     </div>
                     <from class="layui-form" id="invite-form">
                        <div class="invite-item">
                           <div class="layui-form-item">
                              <div class="label must">姓名</div>
                              <div class="">
                                 <input type="text" name="email_username" lay-verify="required" placeholder="" autocomplete="off"
                                    class="layui-input">
                              </div>
   
                           </div>
                           <div class="layui-form-item">
                              <div class="label must">電子郵件</div>
                              <div class="">
                                 <input type="text" name="email_address" lay-verify="required" placeholder="" autocomplete="off"
                                    class="layui-input">
                              </div>
   
                           </div>
                           <div class="layui-form-item">
                              <div class="label must">行動電話</div>
                              <div class="">
                                 <input type="text" name="email_phone" lay-verify="required" placeholder="" autocomplete="off"
                                    class="layui-input">
                              </div>
                           </div>
                        </div>                    
                     </from>
                     <p class="d-flex jc-fe ">

                        <a class="ft12 orange_c add_invited" >新增受邀人</a>
                     </p>
                     <div class="flex-column-center tac">
                        <span class="ft14 mt8 mb15" id="inviteCount">共 1 位</span>

                        <button class="layui-btn layui-btn-lg layui-bg-orange submit">寄出电子票券</button>
                     </div>
                  </div>
               </div>
            </div>
        </div>
    </section>
</main>
<script>

layui.use(['form', 'laydate', 'util'], function () {
      var form = layui.form;
      var form = layui.form;
      var layer = layui.layer;
      var laydate = layui.laydate;
      var util = layui.util;

      form.on('radio', function (data) {
         var id   = $(data.elem).data('id')
         var type = $(data.elem).data('type')
         var value = data.value
         inner = `<p data-id=${id} data-type=${type}>${value} * 1</p>`
         $('.uapt_b1').empty().append(inner);

         // $('<p data-id=' + id + '>' + data.value + '*1</p>').appendTo($('.uapt_b1'))
         // var $item = $('.uapt_b1').find('[data-id=' + id + ']')
         // if ($item.length > 0) {
         //    $item.remove()
         // } else {
         //    $('<p data-id=' + id + '>' + data.value + '*1</p>').appendTo($('.uapt_b1'))
         // }
      });
   })
   // 更新受邀人行中的“第几位”计数
function updateInvitePosition() {
    const inviteItems = document.querySelectorAll('#invite-form .invite-item');
    inviteItems.forEach((item, index) => {
        // 更新每一行的“第几位”文本
        const positionText = item.querySelector('.orange_c');
        if (positionText) {
            positionText.textContent = `第 ${index + 1} 位`;
        }
    });
}

// 更新受邀人数量的函数
function updateInviteCount() {
  const count = $('#invite-form').find('.invite-item').length;
  $('#inviteCount').text(`共 ${count} 位`);
}
   $(document).ready(function(){
            // 添加门票行
            $(document).on('click', '.add_invited', function(){
               const innerHTML = `
                  <div class="invite-item">
                     <div class="tac ft18 mb30 mt40">
                        <p class="mb16 ft-bold">贈票邀請名單（票券將寄送到受邀人電子信箱）</p>
                        <p class="orange_c">第 ${count} 位</p>
                     </div>
                     <div class="layui-form-item">
                        <div class="label must">姓名</div>
                        <div>
                        <input type="text" name="email_username" placeholder="姓名" autocomplete="off" class="layui-input" required>
                        </div>
                     </div>
                     <div class="layui-form-item">
                        <div class="label must">電子郵件</div>
                        <div>
                        <input type="email" name="email_address" placeholder="電子郵件" autocomplete="off" class="layui-input" required>
                        </div>
                     </div>
                     <div class="layui-form-item">
                        <div class="label must">行動電話</div>
                        <div>
                        <input type="text" name="email_phone" placeholder="行動電話" autocomplete="off" class="layui-input" required>
                        </div>
                     </div>
                     <p  class="delete-btn">删除</p>
                  </div>
                  `;
                  $('#invite-form').append(innerHTML);
                     updateInviteCount(); // 更新受邀人数量
                     updateInvitePosition(); // 更新“第几位”标记
                  // $('#inviteCount').text(`共 ${currentCount+1} 位`)
            });


            $(document).on('click', '.delete-btn', function() {
               $(this).closest('.invite-item').remove();
               updateInviteCount(); // 更新受邀人数量
               updateInvitePosition(); // 更新“第几位”标记
            });

              // 监听表单提交事件
         $(document).on('click', '.submit', function() {
           
            // 收集表单中的受邀人数据
            const inviteItems = document.querySelectorAll('#invite-form .invite-item');
            const inviteDataArray = [];

            inviteItems.forEach(item => {
                  // 获取当前行中的姓名、电子邮件和电话
                  const name = item.querySelector('input[name="email_username"]').value;
                  const email = item.querySelector('input[name="email_address"]').value;
                  const phone = item.querySelector('input[name="email_phone"]').value;

                  // 创建对象存储该受邀人信息
                  const inviteData = {
                     name: name,
                     email: email,
                     phone: phone
                  };

                  // 将对象添加到数组中
                  inviteDataArray.push(inviteData);
            });
            $.quickPost('/activity/user/activity/{$act.id}/user_active_par_tick',{
               'ticket_id' : $('.uapt_b1 p').data('id'),
               'ticket_type' : $('.uapt_b1 p').data('type'),
               'email_list' : JSON.stringify(inviteDataArray)
            }).done((res) => {
                     location.reload();
               })
               return false;
         });
   });
 
</script>

{/block}